<template>
  <div class="faq-page">
    <h1 class="faq-title" style="font-size: 48px">御兽阁新手上路</h1>
    <h1>欢迎使用我们的宠物商城！本文档将帮助您快速了解并开始使用我们的服务。</h1>
    <div class="faq-container">
      <ul class="faq-list">
        <li v-for="item in faqItems" :key="item.id" class="faq-item">
          <h2>{{ item.question }}</h2>
          <p>{{ item.answer }}</p>
          <p>{{ item.answer1 }}</p>
          <p>{{ item.answer2 }}</p>
          <p>{{ item.answer3 }}</p>
          <p>{{ item.answer4 }}</p>
          <p>{{ item.answer5 }}</p>
          <p>{{ item.answer6 }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      faqItems: [
        {
          id: 1,
          question: '1. 注册和登录',
          answer: '如果您还没有账户，请按照以下步骤注册：',
          answer1: '1.打开我们的官方网站。',
          answer2: '2.点击页面上的 "注册" 按钮。',
          answer3: '3.输入您的个人信息，例如姓名、电子邮件地址和密码。',
          answer4: '4.阅读并同意我们的条款和条件。',
          answer5: '5.完成注册，您将收到一封确认电子邮件。',
          answer6: '6.如果您已经有账户，请按照以下步骤登录：',
          answer7: '7.打开我们的官方网站。',
          answer8: '8.点击页面上的 "登录" 按钮。',
          answer9: '9.输入您的电子邮件地址和密码。',
          answer10: '10.点击 "登录" 按钮。',
        },
        {
          id: 2,
          question: '2. 浏览和搜索商品',
          answer: '一旦您登录成功，您可以开始浏览和搜索宠物商品：',
          answer1: '1.首页：浏览首页上的推荐商品和促销信息。',
          answer2: '2.分类目录：点击网站导航菜单中的 "分类"，浏览不同类型的宠物商品。',
          answer3: '3.搜索栏：在页面的顶部或侧边可以找到搜索栏，输入关键词来搜索您感兴趣的商品。',
        },
        {
          id: 3,
          question: '3. 购买流程',
          answer: '当您找到心仪的宠物商品后，可以按照以下步骤进行购买：',
          answer1: '1.点击商品图片或标题，进入商品详情页面。',
          answer2: '2.在商品详情页面，查看商品的价格、描述、评价等信息。',
          answer3: '3.如果您决定购买，请选择适当的规格、颜色等选项。',
          answer4: '4.点击 "加入购物车" 按钮将商品添加到购物车。',
          answer5: '5.在购物车页面，确认商品数量和总价。',
          answer6: '6.确认无误后，点击 "结算" 或 "去支付" 进入支付页面。',
          answer7: '7.根据页面提示，选择合适的支付方式，并完成支付流程。',
        },
        {
          id: 4,
          question: '4. 现金账户',
          answer: '在我们的宠物商城中，您可以创建和管理现金账户，以便更方便地进行付款。现金账户可以帮助您快速结算订单，并享受特定的优惠和折扣。',
          answer1: '以下是创建现金账户的步骤：',
          answer2: '1.登录您的宠物商城账户。',
          answer3: '2.进入个人中心或账户设置页面。',
          answer4: '3.选择 "新增现金账户" 或类似选项。',
          answer5: '4.输入所需的信息，例如账户名称、支付密码等。',
          answer6: '5.确认无误后，保存并激活您的现金账户。',
        },
        {
          id: 5,
          question: '5. 订单查询',
          answer: '一旦您成功下单并完成支付，您可以在 "我的订单" 或 "个人中心" 页面查看订单状态和详细信息。',
          answer1: '以下是查询订单的步骤：',
          answer2: '1.登录您的宠物商城账户。',
          answer3: '2.进入 "我的订单" 或 "个人中心" 页面。',
          answer4: '3.查找并点击相应的订单，以查看订单详情。',
          answer5: '4.在订单详情页面，您可以查看订单状态、商品列表、付款信息等。'
        },
        {
          id: 6,
          question: '6. 服务协议',
          answer: '我们强烈建议您在使用宠物商城之前阅读并理解我们的服务协议。服务协议包括了用户权益和责任、隐私政策、退货和售后等重要条款和条件。',
          answer1: '以下是查阅服务协议的步骤：',
          answer2: '1.打开我们的官方网站。',
          answer3: '2.导航菜单中可能有 "服务协议" 或类似选项，点击进入相关页面。',
          answer4: '3.仔细阅读服务协议的内容，确保您充分了解和接受其中的条款。',
          answer5: '4.如有任何问题或疑虑，请联系我们的客服团队。'
        },
        {
          id: 7,
          question: '以上是一些御兽阁常见问题的解答，希望能对您有所帮助。如果您还有其他问题，请随时与我们联系。祝您购物愉快！',
        },
      ],
    };
  },
};
</script>

<style scoped>
.faq-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.faq-title {
  font-size: 24px;
  text-align: center;
}

.faq-container {
  margin-top: 20px;
  padding: 20px;
  background-color: #f5f5f5;
}

.faq-list {
  list-style: none;
  padding: 0;
}

.faq-item {
  margin-bottom: 20px;
}

h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

p {
  margin: 0;
  color: #333;
}
</style>


